<!--公共开始-->
<include file="./public" />
<!--公共结束-->
<title>7min理财</title>
<script type="text/javascript" src="__ROOT__/js/highcharts.js"></script>
<script type="text/javascript">
var fundArray = new Array();
var mydate = new Array();
var myratio = new Array();
$(function() {
 
//饼状图和曲线图
	pie();
	//显示选择层
	$('#jjName').bind('input propertychange', function() {
    	$(".chooseJJ").show();
    	SearchResult($.trim($('#jjName').val()));
    }); 
	//隐藏选择层
	$(".chooseJJ").click(function(){
		hide($(".chooseJJ"));	
	})
	/*添加数据行*/
	$("#addJJ").click(function(){
		if(!checkJjName($("#jjName"))){return false};//判断名称
		if(!checkJjMoney($("#jjMoney"))){return false};//判断金额
		var opeTr=$(this).closest("tr");
		if(opeTr.siblings().length<10){
			var jjName=$("#jjName").val();
			var jjMoney=$("#jjMoney").val();
			var html="<tr><td>"+jjName+"</td><td>"+jjMoney+"元"+"</td><td><a href='javascript:void(0)' onclick='deleteTr(this)'>删除</a></td></tr>"
			opeTr.before(html);
			if(opeTr.siblings().length>=10){
				hide($("#addForm"))
			};
			fundArray.push({name:jjName, y:parseFloat(jjMoney)});
			pie();
            createMovesSheet();
			$("#jjName").val("");
			$("#jjMoney").val("");
			$(".pie_bg").hide();
		}else{
			alert("最多10个基金哦！");
			return false;			
		}

	});
	

	//曲线图
	$('#spline').highcharts({
		chart: {
			type: 'areaspline'
		},
		title: {
			text: '您录入的基金组合过去一年的表现为：',
			style: { "color": "#797979", "fontSize": "18px" ,"fontFamily":"微软雅黑"}		
		},
		legend: {
			enabled: false
		},
		plotOptions: {
			series: {
				color: '#DCE9EE',
                marker: {
                    enabled: false
                },
                lineColor: '#ff6c60'
			}
		},
		tooltip: {
			pointFormat: '{series.name}: <b>{point.y:.2f}%</b>'
		},
		xAxis: {
			categories: mydate,
			tickInterval: 60
		},
		yAxis: {
			labels: {
                format: '{value} %'
            },
			title: {
				enabled: false
			},
			plotLines: [{
				value: 0,
				width: 2,
				color: 'silver'
			}],
			gridLineColor: '#f0f0f0'
		},	
		series: [{
			data: myratio,
			name: '涨幅'
		}]
	});
	
	
	
});

function createMovesSheet(){
    $('#spline').html("<img src='__ROOT__/images/loadingPie.gif' style='margin-top:150px;' />");
        
        var pid = $("#hidpid").val();
        var type = $("#hidtype").val(); 
        var money = $("#jjMoney").val(); 
        pidsarr.push({pid:pid, money:money,type:type});
        $.ajax({  
        type: "post",  
        url: "__URL__/GetFundOneYearMoves",
        dataType: 'json',
        async:true,
        data: {pidsarr:pidsarr}, 
        beforeSend: function(XMLHttpRequest){
        },  
        success: function(json){
            var data = eval('('+json.data+')');
          //$.each(data, function(i,val){      
          //  alert(val['date']);
          //});
           if(mydate != null){
               mydate.length = 0;
           }
          if(myratio != null){
               myratio.length = 0;
           } 
            for(var i=0;i<data.length;i++) 
            { 
                mydate.push(data[i]["date"]);
                myratio.push(parseFloat(data[i]["unionnv"]));
            }
            spline();
            $("#spanzgsy").text(data[0]["maxprice"]+"%"); 
            $("#spanpjsy").text(data[0]["pjprice"]+"%"); 
            $("#spanzdks").text(data[0]["maxhcprice"]+"%"); 
        } 
    })
}


/*删除行*/
function deleteTr(a){
	var thisTr=$(a).closest("tr").index(); //获取第几行
	Array.prototype.baoremove = function(dx)
	{
		if(isNaN(dx)||dx>this.length){return false;}
		this.splice(dx,1);
	}
	fundArray.baoremove(thisTr); //删除该行数组
	pie();
	$(a).closest("tr").remove();
	show($("#addForm"));
}
/*判断基金不为空*/
function checkJjName(input){
	var jjName=$(input).val();	
	if (jjName == "" || jjName == null) {
		alert("要选择一个基金哦~");
		return false;		
	}
	else{
		return true;
	}	
}
/*判断金额格式*/
function checkJjMoney(input){
	var jjMoney=$(input).val();	
	reg =/^(([1-9]{1}\d*)|([0]{1}))(\.(\d){1,2})?$/;  //金额
	if (jjMoney == "" || jjMoney == null) {
		alert("要输入金额哦~");
		return false;		
	}
	else if(!reg.test(jjMoney)){
		alert("输入的不是金额哦~");
		return false;
	}
	else{
		return true;
	}
}

function SearchResult(obj){
    if($.trim(obj) == ""){
        return false;
    }
    $.ajax({  
        type: "post",  
        url: "__URL__/searchkey",
        dataType: 'json',
        data: {keyvalue:obj}, 
        beforeSend: function(XMLHttpRequest){
        },  
        success: function(json){
            var tbody = "";
            if(json != null)
            {
                cit = $("#tbchooseJJ");
                if (cit.size() > 0) {
                    cit.find("tr:not(:first)").remove();
                }
                var trs = ""; 
                $.each(json, function (n, value) {  
                     trs += "<tr onclick=\"getlccp(\'"+ value.productid +"\',\'"+ value.cnname +"\',\'"+ value.type +"\')\"><td>" + value.tradecode + "</td> <td>" + value.cnname + "</td><td>"+ value.type +"</td></tr>";  
                 });
                $("#tbchooseJJ tr:eq(0)").after(trs);
            }
        } 
    })
}
var pidsarr = new Array();

function getlccp(productid,cnname,type){
    $("#jjName").val(cnname);
    $("#hidpid").val(productid);
    $("#hidtype").val(type);    
}

/*画饼*/
function pie(){
	 $('#pie').highcharts({
		chart: {
		},
		colors: ['#ff6c60', '#f8d347', '#fcb322', '#a9d86e', '#41cac0', '#57c8f2', '#7087a3',  '#8085e8', '#b984dc','#8d4653'],
		title: {
			text: '各项基金占比',
			style: { "color": "#999", "fontSize": "16px" ,"fontFamily":"微软雅黑"}		
		},
		tooltip: {
			pointFormat: '{series.name}: <b>{point.y:.2f} [{point.percentage:.2f}%]</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: false,
						format: '{point.name}: {point.y:.2f}',
						distance: 5
				},
				showInLegend: true,
				innerSize: '40%'
			},
		},
		legend: {
					layout: 'horizontal',
					align: 'center',
					borderWidth: 0,
					itemWidth: 225,
					itemMarginTop: 3,
					width:450,
					itemStyle : { 'fontWeight' : 'normal' },
					floating: false,				
					labelFormatter: function() {
						//return this.name + "：￥"+Highcharts.numberFormat(this.y)+"["+Highcharts.numberFormat(this.percentage)+"%]";
						return this.name + "："+Highcharts.numberFormat(this.percentage)+"%";
					}
				},
		series: [{
			type: 'pie',
			name: '占比',
			data: fundArray
		}]
	})
}

function spline(){
    //mydate =['2014-04', '2014-05', '2014-06', '2014-07', '2014-08','2014-09', '2014-10', '2014-11', '2014-12', '2015-01', '2015-02', '2015-03', '2015-04'];
    //myratio ='[10.5,25.4,30.4,18.4,5.4,0.2,-9.5,2.6,18.5,35.9,25.5,12.5,20.5]';
    //myratio =[0,0,-0.0020,-0.0098,-0.0006,-0.0039,-0.0039,-0.0039,-0.0053,0.0048,0.0077,0.0059,0.0167];
    //曲线图
    $('#spline').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
			text: '您录入的基金组合过去一年的表现为：',
			style: { "color": "#797979", "fontSize": "18px" ,"fontFamily":"微软雅黑"}		
		},
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                color: '#DCE9EE',
                marker: {
                    enabled: false
                },
                lineColor: '#ff6c60'
            }
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y:.2f}%</b>'
        },
        xAxis: {
            categories: mydate,
            tickInterval: 60
        },
        yAxis: {
            labels: {
                format: '{value} %'
            },
            title: {
                enabled: false
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }],
            gridLineColor: '#f0f0f0'
        },  
        series: [{
            data: myratio,
            name: '涨幅'
        }]
    });
    
}
</script>

</head>

<body>
<!--头部+顶部开始-->
<include file="./top" />
<!--头部+顶部结束-->
<!--主体开始-->
<input type="hidden" id="hidpid"/>
<input type="hidden" id="hidtype"/>
<div class="main-content">
	<!--饼图和表格-->
    <div class="panel">
    	<div class="panel-head"><h1>模拟配置</h1></div>
        <div class="panel-body">
			<div class="left40 left" style="position:relative;">
            	<div id="pie" style="width:100%;height:480px"></div>
                <div class="pie_bg"><img src="__ROOT__/images/pie.gif" /></div>
            </div>
            <div class="right60 right pz_table">
            	<h1>输入您想购买的基金组合，看是否为最佳配置（最多可以输入10个）</h1>
                <table class="table table-striped table-hover">
                  <thead>
                      <tr>
                        <td width="36%">代码/名称</td>
                        <td width="36%">金额</td>
                        <td>操作</td>
                      </tr>
                  </thead>
                  <tbody>
                      <tr id="addForm">
                        <td><input name="" type="text" class="form-control" id="jjName" placeholder="编码/名称" /></td>
                        <td><input name="" type="text" class="form-control" id="jjMoney" placeholder="金额" />&nbsp;元</td>
                        <td><a hre  f="javascript:void(0)" class="btn btn-danger btn-sm" id="addJJ" >添加</a></td>
                      </tr>
                  </tbody>
                </table>
				<div class="chooseJJ">
                	<table class="table table-hover" id="tbchooseJJ">
                      <thead>
                          <tr>
                            <td width="20%">代码</td>
                            <td>名称</td>
                            <td width="25%">类型</td>
                          </tr>
                      </thead>
                      <tbody>
                          <!--<tr>
                            <td>000987</td>
                            <td>广发新动力</td>
                            <td>股票型</td>
                          </tr>-->
                      </tbody>
                    </table>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!--曲线图-->
    <div class="panel">
    	<div class="panel-body spline">
        	<div id="spline" style="width:100%;height:300px;text-align:center">        	    
        	</div>
            <div class="tongji">
            	<p>*过去5年，根据统计模型计算，您的资产95%的可能性是：</p>
                <div class="per">最高收益：<span id="spanzgsy"></span></div>
                <div class="per">平均收益：<span id="spanpjsy"></span></div>
                <div class="per">最大亏损：<span id="spanzdks"></span></div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    
</div>
<!--主体结束-->
<!--底部开始-->
<include file="./foot" />
<!--底部结束-->
</body>
</html>
